<template>
  <div class="layout">
    <Layout>
      <Header id="adminHeader" :style="{padding: '0px', minHeight: '50px'}" class="myHeader">
        <Row style="height:100%">
          <i-col span="12" class="left company-info" style="height:100%">
            <img src="../assets/logo.png" style="height:33px;margin:0 5px 0 20px" />
            <span >浙江省环保院管理端</span>
          </i-col>
          <i-col span="12" class="right" style="height:100%">
            <Dropdown style="margin-right:20px" @on-click="(name)=>{this.showAction(name)}">
              <Icon type="md-contacts" />
              <span>{{this.admin}}</span>
              <Icon type="ios-arrow-down" />
              <DropdownMenu slot="list">
                <DropdownItem name="editPassword">
                  <Icon type="ios-lock" />修改密码
                </DropdownItem>
                <DropdownItem name="changeAccount">
                  <Icon type="ios-exit" />退出登录
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Modal v-model="edit" titile="修改密码" ok-text="确认修改" footer-hide>
              <div slot="header" style="fontSize:14px;fontWeight:bold">
                <span>修改密码</span>
              </div>
              <div class="center">
                <Form
                  ref="formInline"
                  :model="formInline"
                  :rules="ruleInline"
                  :label-width="80"
                  style="width:350px"
                >
                  <FormItem label="账号">
                    <Input v-model="this.admin" :readonly="true" />
                  </FormItem>
                  <br/>
                  <FormItem label="原密码" prop="oldPassword">
                    <Input v-model="formInline.oldPassword" placeholder="请输入原密码" icon="md-key" />
                  </FormItem>
                   <br/>
                  <FormItem label="新密码" prop="newPassword">
                    <Input v-model="formInline.newPassword" placeholder="请输入新密码" icon="ios-lock" />
                  </FormItem>
                   <br/>
                  <FormItem label="确认密码" prop="resurePassword">
                    <Input
                      v-model="formInline.resurePassword"
                      placeholder="请确认新密码"
                      icon="ios-lock"
                    />
                  </FormItem>
                   <br/>
                  <!-- <FormItem> -->
                  <div class="center">
                    <Button type="primary" @click="this.checkValidate">确认修改</Button>
                  </div>
                </Form>
              </div>
            </Modal>
            <Modal v-model="change" titile="退出登录" @on-ok="exitOk(true)">
              <div slot="header" style="fontSize:14px;fontWeight:bold">
                <span>退出登录</span>
              </div>
              <div class="center warningInfo">
                    <Icon type="ios-alert" class="warnIcon" />确认退出登录吗
              </div>
            </Modal>
          </i-col>
        </Row>
      </Header>
      <Layout>
        <Sider id="adminSider" ref="side1" collapsible :collapsed-width="78" v-model="isCollapsed" > 
          <!-- <div class="company-info center">
            <span class="center">浙江省环保院</span>
          </div>-->
          <div class="sider">
            <Menu :theme="theme" active-name="1" width="auto" :class="menuitemClasses">
              <MenuItem name="1">
                <router-link to="/epi/admin/department">
                  <Icon type="ios-paper" />
                  <span>部门管理</span>
                </router-link>
              </MenuItem>
              <MenuItem name="2">
                <router-link to="/epi/admin/staff">
                  <Icon type="ios-people" />
                  <span>员工管理</span>
                </router-link>
              </MenuItem>
              <MenuItem name="3">
                <router-link to="/epi/admin/role">
                  <Icon type="md-contact" />
                  <span>角色管理</span>
                </router-link>
              </MenuItem>
              <MenuItem name="4">
                <router-link to="/epi/admin/view">
                  <Icon type="ios-apps-outline" />
                  <span>视图管理</span>
                </router-link>
              </MenuItem>
              <MenuItem name="5">
                <router-link to="/epi/admin/project">
                  <Icon type="logo-buffer" />
                  <span>项目设置</span>
                </router-link>
              </MenuItem>
            </Menu>
          </div>
        </Sider>
        <Content  id="adminContent" :style="{padding: '20px'}" >
          <router-view />
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
export default {
  data() {
    const validatePwd = (rule, value, callback) => {
      const res=this.common.judgePassword(value);
     // console.log("密码验证:",res);
      if(value===""){
        callback(new Error("新密码不得为空"));
      }else if(res===-1){
        callback(new Error("密码长度必须在6~18位，且至少包含数字、英文字母，可以含有特殊符号"))
      }else{
        callback();
      }
    }
    const pwdCheckValidate = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("确认密码不得为空"));
      } else if (this.formInline.newPassword != value) {
        callback(new Error("新密码与确认密码不一致"));
      } else {
        callback();
      }
    };
    return {
      siderHeight:document.body.clientHeight,
      isCollapsed: false,
      theme: "light",
      admin: "",
      /**绑定对应弹窗 */
      set: false,
      edit: false,
      change: false,
      /**formInline存放修改密码的内容 */
      formInline: {
        oldPassword: "",
        newPassword: "",
        resurePassword: ""
      },
      ruleInline: {
        oldPassword: [
          { required: true, message: "原密码不得为空", trigger: "blur" }
        ],
        newPassword: [
         { required: true, message: "新密码不得为空", trigger: "blur" },
           { validator: validatePwd, trigger: "blur" }
        ],
        resurePassword: [
          { required: true, message: "确认密码不得为空", trigger: "blur" },
          { validator: pwdCheckValidate, trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    menuitemClasses: function() {
      console.log(this.isCollapsed);
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  mounted(){
        var sider = document.getElementById("adminSider");
        var content=document.getElementById("adminContent");
        var height= document.documentElement.clientHeight -64
        // console.log("headerHeight:",header.style.height);
        console.log("height:",height);
        sider.style.height =  height+"px";
        content.style.height=sider.style.height;
  },
  beforeMount() {

    /**从cookie中取出admin的信息，如果admin不存在则跳回登录页面 */
    var admin = "";
    //admin=this.getCookie('admin');
    admin = sessionStorage.getItem("admin");
    if (admin == "" || admin == "undefined") {
      this.$router.push({ path: "/epi/login" });
      this.$router.go(0);
    } else {
      this.admin = admin;
    }
  },
  methods: {
    getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == " ") c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
      }
    },
    //设置cookie
    setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
      var expires = "expires=" + d.toUTCString();
      document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/epi"; //path=/是根路径
    },
    //清除cookie
    clearCookie(cname, cvalue) {
      this.setCookie(cname, cvalue, -1);
    },
    /**选择不同的操作弹出不同的窗口 */
    showAction(name) {
      if (name == "editPassword") {
        this.edit = true;
      } else {
        this.change = true;
      }
    },
    /**验证表单的回调 */
    checkValidate() {
      this.$refs.formInline.validate(valid => {
        if (valid == true) {
          this.editPasswordOk();
        }
      });
    },
    /**用户点击确认修改密码时的回调 */
    editPasswordOk() {
      this.$ajax({
        method: "post",
        url: "http://47.101.180.43:8080/editPassword",
        data: {
          oldOne: this.formInline.oldPassword,
          newOne: this.formInline.newPassword
        }
      })
        .then(response => {
          var code = "";
          code = response.data.code;
          if (code == 0) {
            this.$Message.success(response.data.data);
            this.exitOk(false);
          } else {
            this.$Message.error(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    /**退出登录的回调 */
    exitOk(res) {
      this.$ajax({
        method: "post",
        url: "http://47.101.180.43:8080/logout"
      })
        .then(response => {
          var code = "";
          code = response.data.code;
          if (code == 0) {
            if (res == true) {
              this.$Message.success(response.data.data);
            }

            console.log(this.admin);
            //this.clearCookie('admin',this.admin);
            sessionStorage.removeItem("admin");

            setTimeout(() => {
              window.location.href = "/login.html#/";
              // this.$router.push({
              //   path:'/epi/login'
              // });
              // this.$router.go(0);
            }, 2000);
          } else {
            this.$Message.error(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style>
@import "../../static/global.css"; /*引入公共样式*/
.ivu-layout {
  background: #ffffff;
}

#content {
  padding: 10px 20px 0;
  margin-left: 200px;
  overflow-y: auto;
}

.ivu-menu-item {
  padding: 0 !important;
  line-height: 45px;
  height: 45px;
  text-align: center;
  background-color: none;
  
}
* .collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
  font-size: 0px;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}


.ivu-menu-item a {
  display: block;
  width: 100%;
  height: 100%;
  color: #72bc87;
  /* color: rgba(255, 255, 255, 0.7); */
}

.ivu-menu-item-selected a {
  color: #639387;

}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
    border-right: 2px solid #639387;
}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
    border-right: 2px solid #639387;
}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
    background: none;
    border: none;
}
.ivu-layout-sider-trigger {
    background: none

}
.form-line {
  /*padding设置元素的边内距*/
  padding: 5px;
  margin: 10px 5px;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>